<template>
	<view class="container">
		<z-paging ref="paging" v-model="followingList" style="height: 100%;" @query="showFollowingList" :fixed="false" :auto="false">
			<view>
				<!-- 列表为空 -->
				<!-- <view v-if="followingList==[]" class="null">
					<view class="">
						<view class="null-pic">
							<image style="width: 193.82;height: 187.34;" src="@appstatic/my/my_icon_null.png" mode="aspectFit"></image>
						</view>
						<view class="null-text">
							<text>暂无数据</text>
						</view>
					</view>
				</view> -->
				<!--列表-->
				<view v-if="followingList!==[]" class="followinglist">
					<view v-for="(item,index) in followingList" class="row">
						<view class="left">
							<image class="avature" @error="imgerror($event, index)" :src="item.userimages||'@appstatic/my/my_icon_avatar_unlogin.png'" mode=""></image>
							<!--下标-->
							<image v-if="item.iconcolor=='orange'" class="avatar-bottom" src="@appstatic/my/my_icon_avatar_bottom.png" mode=""></image>
							<image v-if="item.iconcolor=='black'" class="avatar-bottom" src="@appstatic/my/my_icon_avatar_bottom_black.png" mode=""></image>
							<image v-if="item.iconcolor=='none'" class="avatar-bottom" src="" mode=""></image>
							<view class='text'
								v-if="item.wechatName==''||item.wechatName==null">
								<view v-if="item.phone==null||item.phone==undefined">
									已注销用户
								</view>
								<view v-else>
									{{item.phone.substr(0, 3) + '*****' + item.phone.substr(8)}}
								</view>
							</view>
							
							<view class='text' v-else>{{item.wechatName}}</view>
						</view>
					
						<view class="right">
							<!-- <button :class="item.foucsStatus==2?'button-followed':'button-unfollow'" @click="followCancel(item)">{{item.foucsStatus == 2?"互关":"已关注"}}</button> -->
						<button v-if="item.foucsStatus==2" class="button-followed" @click="followCancel(item)">互关</button>
						<button v-else-if="item.foucsStatus==1" class="button-unfollow" @click="followCancel(item)">已关注</button>
						<!-- <button :class="item.foucsStatus==2?'button-followed':'button-unfollow'" @click="followCancel(item)">{{item.foucsStatus == 2?"互关":"已关注"}}</button> -->
							<button v-else class="button-unfollow1" @click="follow(item)">关注</button>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	const app = getApp();
	const network = require("@manager/network-manager.js");
	const dialog=require("../../utils/dialog.js");
	
	export default {
		data() {
			return {
				text:"关注列表",
				userInfo: null,
				pagination:{
					loadmore:true,
					page:1,//当前页
					totalPage:1,//总页
					limit:100000,
					length:100
				},
				followingList:[],
				authorId:""
			};
		},
		onLoad(options){
			if(options.loginId){
				this.authorId = options.loginId
			}
		},
		mounted() {
			this.$nextTick(() => {
				// 触发下拉加载
				this.$refs.paging.reload();
			})
		},
		methods:{
			
			showFollowingList(pageNo,pageSize){
				var that=this;
				var uri=app.globalData.config.interfaces.URI_FOLLOWING_LIST;
				var params={
					"pageNum":pageNo,
					"pageSize":pageSize,
					"isType": 1,
					"loginId":this.authorId||app.getUserId()
				};
				network.get(uri,params,'form').then(res=>{
					
					if(res.code==200){
						var _list=res.data.list;
						that.$refs.paging.complete(_list);
						
					}else{
						uni.showToast({
							title:res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch()
			},
		 
			followCancel(item){
				if(this.authorId){
					return
				}
				var that=this
				console.log(item)
				// if(item.foucsStatus==2){//取消关注
					var uri=app.globalData.config.interfaces.URI_COMMUNITY_FOCUS_CANCEL;
					var params={
						// "fanId":app.getUserId(),
						// "authorId": item.authorId,
						// "id":item.id,
						"authorId":item.id,
						"fanId":app.getUserId()
					};
					network.post(uri,params,'json').then(res=>{
						console.log(res)
						if(res.code==200){
							item.foucsStatus = 0
						}else{
							uni.showToast({
								title:res.message,
								duration: 3000,
								icon: 'none'
							})
						}
					}).catch()
				// }
				
			},
			follow(item){
				if(this.authorId){
					return
				}
				console.log(item)
				 
					var uri=app.globalData.config.interfaces.URI_COMMUNITY_FOCUS;
					var params={
						"authorId": item.id,
						"fanId": app.getUserId(),
						// "fanId": item.id,
						// "authorId": app.getUserId(),
					};
					network.post(uri,params,'json').then(res=>{
						console.log(res)
						if(res.code==200){
							item.foucsStatus = 1
						}else{
							uni.showToast({
								title:res.message,
								duration: 3000,
								icon: 'none'
							})
						}
					}).catch()
				 
			},
			//图片加载错误默认图
			imgerror: function(e, img_index) {
				var _this = this
				if (_this.followingList.length > 0) {
					_this.followingList[img_index].userimages =
						"@appstatic/my/my_icon_avatar_unlogin.png"
				}
			},
		}
		
		
	
		
		
	}
</script>

<style>
	.container {
		width: 100vw;
		height: 100vh;
		background: url("@appstatic/my/my_icon_list_background.jpg") no-repeat;
		background-size: 100vw,100vh;
	}
	.followinglist {
		display: flex;
		flex-direction: column;
		padding-left: 23.5px;
		padding-right: 24.5px;
	}
	.row {
		height: 74px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		vertical-align: middle;
		align-items: center;
	}
	.left {
	  display: flex;
	  vertical-align: middle;
	  align-items: center;
	  flex-direction: row;
	}
	.text {
		font-weight: 400;
		font-size: 16px;
		line-height: 22px;
		display: flex;
		align-items: center;
	}
	.avature {
		float: left;
		width: 42px;
		height: 42px;
		border-radius: 42px;
		margin-right: 10px;
	}
	.avatar-bottom {
		float: left;
		width: 14px;
		height: 14px;
		position: relative;
		right: 14px;
		top: 15px;
	}
 
	button::after {
		border: none;
	}
	/* 互关 */
	.button-followed {
		width: 68px;
		height: 25px;
		border: 1px solid #EA5404;
		box-sizing: border-box;
		border-radius: 2px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-weight: 400;
		font-size: 12px;
		line-height: 17px;
		color: #EA5404;
		/* background-color: #FFFFFF; */
	}
	/* 没被回关 */
	.button-unfollow {
		width: 68px;
		height: 25px;
		
		border: 1px solid #ADB0AE;
		box-sizing: border-box;
		border-radius: 2px;
		
		font-weight: 400;
		font-size: 12px;
		line-height: 17px;
		color: #ADB0AE;
		
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center; 
	}
	.null {
		width: 100vw;
		height: 100vh;
		display: flex;
		align-items: center;/*上下居中*/
		justify-content: center;/*左右居中*/
	}
	.null-pic {
		display: flex;
		flex-direction: row;	
		justify-content: center;
	} 
	.null-text {
		display: flex;
		flex-direction: row;
		justify-content: center;
		font-weight: 400;
		font-size: 14px;
		line-height: 20px;
		color: #ADB0AE;
	}
	
	/* 关注*/
	.button-unfollow1 {
		width: 68px;
		height: 25px;
		background-color: #EA5404;
		border-radius: 2px;
		
		font-weight: 400;
		font-size: 12px;
		line-height: 17px;
		color: #FFFFFF;
		
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
</style>

